const { default: styled } = require("styled-components");

const Center = styled.div`
width: 150px;
display: flex;
align-items: center;
justify-content: center;
.search{
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 20px;
    background-color: white;
    border-radius: 30px;
    border: 1px solid ${props => props.theme.color.Vanishing};
    &:hover{
        ${props=>props.theme.shadow.typeOne}
    }
    input{
       padding: 0;
       outline: 0;
       margin: 0;
       border: 0;
       color: black;
       width: 260px;
       ::-webkit-input-placeholder{
        color:black;
        font-weight: 600;
        font-size: 12px;
       }
    }
    .icon{
        margin-left: 10px;
        width: 30px;
        height: 30px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 33px;
        color: white;
        cursor: pointer;
    }

}

`

export default Center